<template>
  <div class="container">
    <div class="history-search">
      <div>
        <span>设备ID：{{this.$route.query.id}}</span>
        <span>设备名称：
          <dict-tag :type="DICT_TYPE.EQUIPMENT_ACQUISITION_INFO_STATION_ID" :value="this.$route.query.id" />
        </span>
      </div>
      <el-form :model="queryParams" ref="queryForm">
        <el-form-item>
          <el-radio-group v-model="radioTime" size="mini">
            <el-radio :label="'today'" border >当天</el-radio>
            <el-radio :label="'thisMonth'" border>当月</el-radio>
            <el-radio :label="'lastHalfYear'" border>半年</el-radio>
            <el-radio :label="'lastOneYear'" border>一年</el-radio>
              <el-date-picker v-model="pickTime" style="width: 240px; margin-left: 10px"
                            value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期"
                            end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" size="mini"/>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <el-card class="box-card">
      <div class="title">历史数据</div>
      <line-chart v-if="list.length>0" :chart-data="lineChartData" :height="'600px'" />
      <div v-else class="no-data">No Data</div>
    </el-card>
    <div class="list-card">
      <div v-if="list.length>0">
        <div style="padding: 20px 0">
          <el-button type="primary" size="mini" @click="handleExport" :loading="exportLoading">
            导出</el-button>
        </div>
        <el-card style="padding-top: 20px">
          <!-- 列表 -->
          <el-table v-loading="loading" :data="list">
            <el-table-column label="采集器名称" align="center" prop="stationId">
              <template v-slot="scope">
                <dict-tag :type="DICT_TYPE.EQUIPMENT_ACQUISITION_INFO_STATION_ID" :value="scope.row.stationId" />
              </template>
            </el-table-column>
            <el-table-column label="数据采集上传时间" align="center" prop="monitorTime">
              <template v-slot="scope">
                <span>{{ parseTime(scope.row.monitorTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="通道要素名称及单位" align="center" prop="enum">
              <template v-slot="scope">
                <dict-tag :type="DICT_TYPE.EQUIPMENT_ACQUISITION_INFO_E_NUM" :value="scope.row.enum" />
              </template>
            </el-table-column>
            <el-table-column label="数据结果" align="center" prop="evalue"></el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime">
              <template v-slot="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize" @pagination="getList()" />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  exportAcquisitionInfoExcel,
  getAcquisitionInfoPage,
  getAcquisitionInfoTime
} from "@/api/equipment/acquisitionInfo";
import LineChart from '../../dashboard/LineChart'
import {DICT_TYPE, getDictData} from "@/utils/dict";
import {getDate} from '@/utils/timeUtil'

export default {
  components: {
    LineChart,
  },
  data () {
    return {
      lineChartData: {
        xData: [],
        yData: {}
      },
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 总条数
      total: 0,
      // 溯源信息列表
      list: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        stationId: null,
        monitorTime: []
      },
      pickTime:[],
      radioTime: 'thisMonth'
    }
  },
  created () {
    this.queryParams.monitorTime[0]= getDate(this.radioTime).startTime+ '00:00:00'
    this.queryParams.monitorTime[1]=getDate(this.radioTime).endTime+'23:59:59'
    this.getList()
  },
  watch:{
    radioTime(val){
      if(val!==''){
        this.queryParams.pageNo = 1;
        this.queryParams.monitorTime[0]= getDate(val).startTime+ '00:00:00'
        this.queryParams.monitorTime[1]=getDate(val).endTime+'23:59:59'
        this.pickTime=undefined
        this.getList()
      }
    },
    pickTime(val){
      if(val!==undefined) {
        this.queryParams.pageNo = 1;
        this.radioTime = ''
        this.queryParams.monitorTime = val
        this.getList()
      }
    }
  },
  methods: {
    /** 查询列表 */
    getList () {
      this.loading = true;
      // 执行查询
      this.queryParams.stationId = this.$route.query.id;
      getAcquisitionInfoPage(this.queryParams).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
      getAcquisitionInfoTime(this.queryParams).then(response => {
        this.lineChartData={
          xData: [],
          yData: {}
        }
        //Object转Map
        let map = new Map(Object.entries(response.data))
        //按key（时间先后）排序
        let sorted= new Map(Array.from(map).sort(([a], [b]) => a.localeCompare(b)))
        sorted.forEach((item,key)=>{
          let timeKey = this.parseTime(key)
          this.lineChartData.xData.push(timeKey)
          item.map(t=>{
            let arr=[106,107,147,154,155,156,157];
            if(arr.indexOf(t.enum)!==-1){
              if (!this.lineChartData.yData[t.enum]) {
                this.lineChartData.yData[t.enum] = []
              }
              this.lineChartData.yData[t.enum].push({
                name:getDictData(DICT_TYPE.EQUIPMENT_ACQUISITION_INFO_E_NUM, t.enum)['label'],
                num: t.evalue
              })
            }
          })
        })
      });
    },
    /** 导出按钮操作 */
    handleExport () {
      // 处理查询参数
      let params = { ...this.queryParams };
      params.pageNo = undefined;
      params.pageSize = undefined;
      this.$modal.confirm('是否确认导出所有设备采集信息数据项?').then(() => {
        this.exportLoading = true;
        return exportAcquisitionInfoExcel(params);
      }).then(response => {
        this.$download.excel(response, '设备采集信息.xls');
        this.exportLoading = false;
      }).catch(() => { });
    }
  }

}
</script>

<style lang='scss' scoped>
.container {
  padding: 0 24px 24px;
  background-color: rgb(240, 242, 245);
  min-height: calc(100vh - 86px);
  .history-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .el-form-item {
      margin: auto 0;
    }
    span {
      margin-left: 8px;
    }
    .el-radio--mini{
      margin-right: 0;
      background: #fff;
    }
    ::v-deep .el-radio__input {
      display: none;
    }
  }
  .box-card {
    .title {
      font-size: 18px;
      font-weight: bold;
    }
    .no-data {
      height: 600px;
      font-size: 28px;
      text-align: center;
      line-height: 600px;
    }
  }
  .list-card {
    .el-card__body {
      padding: 30px;
    }
  }
}
</style>
